<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*属性选择器*/
        [v-cloak] {
            display: none;
        }

        .title {
            border: 2px solid gold;
        }

        .p1 {
            text-decoration: underline;
        }

        .p11 {
            background-color: pink;
        }
    </style>
</head>
<body>
<div id="app">
    <!--v-if接收一个Boolean值，如果为 true,元素显示，反之亦然-->
    <h1 v-if="h1Status" :class="className1" v-bind:style="style1">我是标题</h1>
    <p>样式绑定 1. 基于行内 2. 基于类名的</p>
    <p :class="classNameObj">Lorem ipsum dolor sit amet, consectetur.</p>
    <p :class="classNameArr">consectetur.</p>
</div>
</body>
<script src="lib/vue.js"></script>
<script type="text/javascript">
    new Vue({
        el: '#app',
        data: {
            style1: 'color: #0f0;font-size: 30px;',
            className1: 'title',
            /*注意：如果对象的属性值为true，则对应的属性的类名会设置*/
            classNameObj: {p1: true, p11: false},
            classNameArr: ['p1', 'p11'],
            h1Status: true,
        }
    })
</script>

</html>
